<template>
  <div class="container">
    <div class="flex flex-wrap f-ptp10">
      <CaseTypeSelect class='f-mrt20 f-mbt10 f-w120' @getCaseType='getCaseType' placeholder="问题类型" />
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="mobileNo" placeholder="手机号" clearable></el-input>
      <Region class='f-mrt20 f-mbt10' @getRegion='getRegion' />
      <el-date-picker
        class='f-mrt20 date'
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button class='f-h40' @click="getList" type="primary">查询</el-button>
    </div>
    <div>
      <el-table
        :data="issueList"
        border
        style="width: 100%">
        <el-table-column prop="caseTypeName" label="问题类型" width="180"></el-table-column>
        <el-table-column prop="mobileNo" label="手机号" width="120"></el-table-column>
        <el-table-column prop="region" label="地区" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.provinceName}} {{scope.row.cityName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="问题详情" width="180">
          <!-- <template slot-scope="scope">
            <span @click="showBtnClick(scope.$index, scope.row)" class='s-c-green f-csp'>查看</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="createTime" label="提交时间" width="180">
          <template slot-scope="scope">
            <span>{{ tranDate(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="manage" label="管理">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 'normal'" @click="handleClickEvent(scope.$index, scope.row)" class='s-c-green f-csp f-mrt10'>处理</span>
            <span class='f-mrt10' v-else>已处理</span>
            <span @click="editIssueBtnClickEvent(scope.row)" class='s-c-green f-csp f-mrt10'>{{scope.row.answer ? '修改' : '回答'}}</span>
            <span @click="recommendBtnClickEvent(scope.row)" class='s-c-green f-csp f-mrt10'>{{scope.row.recommend == 1 ? '取消推荐' : '推荐首页'}}</span>
            <span @click="deletedBtnClickEvent(scope.row)" class='s-c-red f-csp'>删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class='f-ptp20 f-pbt20 f-oh'>
        <el-pagination
          class='f-fr'
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="问题详情"
      :visible.sync="showDetial"
      center
      width="560px">
      <span>{{issueDetail}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDetial = false">取 消</el-button>
        <el-button type="primary" @click="showDetial = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="问题回答"
      :visible.sync="showAnswer"
      :before-close="handleCloseShowAnswer"
      center
      width="560px">
      <div>
        <div class='answer-item'>
          <label for="">问题</label>
          <div class='answer-right'>
            <p>{{currentIssue.content}}</p>
          </div>
        </div>
        <div class='answer-item'>
          <label for="">回答</label>
          <div class='answer-right'>
            <el-input type='textarea' row='6' v-model="answer" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAnswer = false">取 消</el-button>
        <el-button type="primary" @click="editAnswer">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Region from '../components/Region';
import CaseTypeSelect from '../components/CaseTypeSelect'
export default {
  name: 'IssueManage',
  components: {
    'Region': Region,
    'CaseTypeSelect': CaseTypeSelect
  },
  data() {
    return {
      showAnswer: false,
      currentIssue: {}, // 当前选择的问题
      answer: '',
      issueDetail: '',
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      province: '',
      city: '',
      mobileNo: '',
      date: null,
      showDetial: false,
      issueList: [],
      caseType: ''
    }
  },
  created() {
    this.getList();
  },
  methods: {
    deletedBtnClickEvent(issue) {
      this.$confirm('是否删除当前问题？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleIssue({
          id: issue.id,
          state: 'deleted'
        }, '已删除', this.getList);
      })
    },
    recommendBtnClickEvent(issue) {
      const isRecommend = issue.recommend == 1 ? true : false; 
      this.$confirm(`${isRecommend ? '是否取消推荐首页？' : '是否推荐到首页'}`, `${isRecommend ? '取消推荐' : '推荐首页'}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleIssue({
          id: issue.id,
          recommend: issue.recommend == 0 ? 1 : 0
        }, `${isRecommend ? '已取消推荐' : '推荐成功'}`);
      })
    },
    handleCloseShowAnswer() {
      this.currentIssue = {};
      this.answer = '';
      this.showAnswer = false; 
    },
    // 编辑问题按钮点击事件
    editIssueBtnClickEvent(issue) {
      this.currentIssue = issue;
      this.answer = issue.answer;
      this.showAnswer = true;
    },
    editAnswer() {
      console.log('answer::', this.currentIssue);
      this.handleIssue({
        id: this.currentIssue.id,
        answer: this.answer
      }, '成功', () => {
        this.getList();
        this.showAnswer = false;
      }); 
    },
    getCaseType(caseType) {
      this.caseType = caseType;
    },
    tranDate(date) {
      return this._utils.format(date, 'yyyy-mm-dd');
    },
    getList() {
      const _this = this;
      console.log('caseType::', this.caseType);
      const params = {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize
      };
      if(!(this._utils.isEmpty(this.caseType))) {
        params.caseType = this.caseType;
      }
      if(!(this._utils.isEmpty(this.mobileNo))) {
        params.mobileNo = this.mobileNo;
      }
      if(!(this._utils.isEmpty(this.province))) {
        params.questionProince = this.province;
      }
      if(!(this._utils.isEmpty(this.city))) {
        params.questionCity = this.city;
      }
      if(this._utils.getType(this.date) === 'Array' && this.date.length === 2) {
        params.startDay = this._utils.format(this.date[0], 'yyyy-mm-dd');
        params.endDay = this._utils.format(this.date[1], 'yyyy-mm-dd');
      }
      console.log('params:::', params);
      this.$store.dispatch('GET_ISSUE_LIST', params).then(res => {
        if(res.data.retCode == 0) {
          _this.issueList = res.data.data;
          _this.totalCount = res.data.totalCount;
        }
      }).catch(err => {
        console.error('获取问题列表：：', err);
      })
    },
    // 查看按钮点击事件
    showBtnClick(index, row) {
      this.issueDetail = row.content;
      this.showDetial = true;
    },
    // 处理按钮点击事件
    handleClickEvent(index, row) {
      this.$confirm('是否将当前问题标记为已处理？', '处理', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleIssue({
          id: row.id,
          state: 'done'
        }, '已处理');
      })
    },
    // 问题处理
    handleIssue(params, msg, callback) {
      this.$store.dispatch('UPDATE_ISSUE', params).then(res => {
        if(res.data.retCode == 0) {
          this.getList();
          this.$message.success(msg);
          callback && callback();
        } else {
          res.data.errorMsg && this.$message({
            message: res.data.errorMsg,
            type: 'warning'
          });
        }
      }).catch(err => {
        console.error('处理问题：：', err)
      })
    },
    // 分页组件回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    },
    // 获取省市
    getRegion(obj) {
      
      if(obj.province && obj.city) {
        this.province = obj.province.id;
        this.city = obj.city.id;
      } else {
        this.province = '';
        this.city = '';
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .date >>> .el-range-separator {
  width: auto !important;
} */
.answer-item{
  display: flex;
  padding-bottom: 20px;
  line-height: 1.8;
}
.answer-item>label{
  width: 100px;
  font-size: 14px;
  text-align: right;
  flex-shrink: 0;
  color: #999;
}
.answer-right{
  flex: 1;
  padding-left: 10px;
  color: #666;
  font-size: 14px;
}
</style>